<template>
	<view class="applyRefund">
		<view class="header">
			<navigator open-type="reLaunch" url="/pages/home/home">
				<image src="../../static/image/fanhui (2).png" mode="widthFix" style="width: 80rpx;"></image>
			</navigator>
			<text>退款详情</text>
		</view>
		<view class="payfor">
			<view class="titleName">处理完成，退款入账中</view>
			<view class="returnPrice">
				<text>退款金额</text>
				<text style="color: #333333;">￥25.00元</text>
			</view>
			<view class="returnPrice">
				<text>退回账户</text>
				<text style="color: #333333;">微信账户</text>
			</view>
		</view>
		<view class="applyDetail">
			<view class="title" style="font-size: 28rpx; color: #333333;">退款进度</view>
			<view class="title">
				<text>退款申请已提交</text>
			</view>
			<view class="title">
				<text style="color: #ff5300;">处理完成, 退款入账中</text>
			</view>
			<view class="title">
				<text>退款成功</text>
			</view>
		</view>
		<view class="choose">
			<text>遇到下列问题</text>
			<view class="problem">
				<text>查询退款进度</text>
				<text>抵用券可以退吗</text>
				<text>哪些钱可以退</text>
				<text>我要取消退款</text>
			</view>
		</view>




	</view>
</template>

<script>
	export default {
		components: {},
		mounted() {},
		data() {
			return {

			}
		},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	.applyRefund {
		position: relative;
		background-color: #f9f9f9;
		height: 800px;

		.header {
			height: 340rpx;
			background: linear-gradient(120deg, #fd8839, #fd873c, #fd8846, #fd8c38, #fda548, #fda548, #fd793a, #fd883a);
			color: white;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 40rpx 0;

			text {
				margin-left: 240rpx;
			}
		}

		.payfor {
			width: 660rpx;
			height: 200rpx;
			position: absolute;
			padding: 0 24rpx;
			top: 220rpx;
			left: 0;
			background-color: #FFFFFF;
			margin: 24rpx;
			border-radius: 20rpx;
			box-shadow: -1px 1px 3px 1px rgba(gray, 0.4);

			.box {
				display: flex;

				.center {
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
				}
			}

			.titleName {
				font-size: 28rpx;
				padding: 10rpx 0;
				color: #ff5601;
				font-weight: bold;
				text-align: center;
			}
			.returnPrice {
				font-size: 24rpx;
				color: #999999;
				margin: 10rpx 0;
			}
		}

		.applyDetail {
			margin: 24rpx 24rpx 0 24rpx;
			padding: 24rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			margin-top: 120rpx;

			.title {
				font-size: 24rpx;
				font-weight: bold;
				margin: 10rpx 0;
				color: #999999;
				margin: 50rpx 0;
				border-bottom: 1px solid #f5f5f5;
			}

		}

		.choose {
			padding: 24rpx;
			margin: 24rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			.title {
				font-size: 28rpx;
			}
			.problem {
				font-size: 24rpx;
				text {
					border: 1px solid #f8f8f8;
					border-radius: 20rpx;
					margin: 10rpx 60rpx 10rpx 0;
					
				}
			}
		}







	}
</style>
